<template>
  <div>
    <header>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据统计</el-breadcrumb-item>
        <el-breadcrumb-item>数据报表</el-breadcrumb-item>
      </el-breadcrumb>
    </header>
    <main>
      <div id="main" style="width: 750px; height: 400px"></div>
    </main>
  </div>
</template>
<script>
import { getTotal } from "@/api/goods";
import * as echarts from "echarts";
export default {
  name: "ShopReports",
  data() {
    return {
      list: {},
    };
  },
  async mounted() {
    await this.getTotalList();
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    this.list.title = { text: "用户来源" };

    let option = {
      title: {
        text: "用户来源",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: this.list.legend,
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis:{
        data:this.list.xAxis[0].data,
        boundaryGap:false
      },
      yAxis: this.list.yAxis,
      series: this.list.series,
    };
    option && myChart.setOption(option);
  },
  methods: {
    async getTotalList() {
      const res = await getTotal();
      this.list = res.data.data;
      console.log(this.list.xAxis);
    },
  },
};
</script>
<style lang='less'  scoped>
main {
  width: 100%;
  background-color: #fff;
  margin-top: 15px;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 2px 2px 10px #ccc;
}
</style>
